<script lang="ts">
import {
  ref,
  defineProps,
  defineEmits,
  computed,
  reactive,
  defineComponent
} from 'vue';
import {
  ElMessage,
  ElLoading,
  ElNotification,
  UploadProps,
  UploadUserFile
} from 'element-plus';
import { getDictDataType } from '@/api/dictManagement';
export default defineComponent({
  name: 'Upload',
  props: {
    DictType: {
      type: String,
      default: function () {
        return '';
      }
    },
    fileList: {
      type: Array,
      default: function () {
        return [];
      }
    }
  },
  setup(props) {
    let tabList = ref([]);
    let uploadList = ref<any>([]);
    let loading = reactive<any>(null);
    let activeName = ref('');
    const emit = defineEmits(['update:fileList']);

    getTabList();
    function getTabList() {
      getDictDataType(props.DictType).then(re => {
        tabList.value = re.response;
        tabList.value.forEach(function (item: any) {
          item.fileList = [];
        });
        activeName.value = re.response[0].dictCode;
        props.fileList?.forEach(function (item: any) {
          tabList.value.forEach(function (items: any, index) {
            if (item.dictCode == items.dictCode) {
              items.fileList.push({
                name:
                  items.fileName ||
                  item?.fileUrl.split('/')[item?.fileUrl.split('/').length - 1],
                url: item.fileUrl,
                dictCode: items.dictCode,
                fileType: item.fileType,
                fileUrl: item.fileUrl
              });
            }
          });
        });
      });
    }

    function uploadProgress() {
      loading = ElLoading.service({
        lock: true,
        text: '文件上传中…',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.5)'
      });
    }

    // 上传接口调取成功status为200
    function uploadSuccess(res, file, fileList, item, index) {
      console.log('fileList', fileList);
      fileList.forEach(items => {
        items.dictCode = item.dictCode;
        items.dictIndex = index;
        items.type = items.raw?.type;
        items.fileType = items.raw?.type;
        items.name = items.name;
        items.fileName = items.name;
        items.fileUrl = items?.response?.response?.path || items.fileUrl;
      });
      props.fileList[index] = fileList;
      // currentArr.push(file);
      // console.log(res);
      console.log(file);
      console.log(fileList);
      console.log(item);
      if (res.code === 1) {
        // 文件上传成功
        ElNotification.success({
          title: '成功',
          message: `${file.name}文件上传成功！`
        });
        loading.close();
      } else {
        uploadError();
      }
    }
    function uploadError() {
      loading.close();
      ElMessage.error('文件上传失败，请检查文件大小或文件格式');
    }
    function handleRemove(file, uploadFiles, item, index) {
      uploadFiles.forEach(items => {
        items.dictCode = item.dictCode;
        items.dictIndex = index;
      });
      props.fileList[index] = uploadFiles;
      console.log(file);
      console.log(uploadFiles);
      console.log(item);
      console.log(index);
    }
    return {
      tabList,
      activeName,
      uploadProgress,
      handleRemove,
      uploadSuccess,
      uploadError
    };
  }
});
</script>

<template>
  <el-tabs type="border-card" class="train-tab" v-model="activeName">
    <el-tab-pane
      v-for="(item, index) in tabList"
      :label="item.dictLabel"
      :name="item.dictCode"
      :key="index"
    >
      <el-upload
        name="file"
        :data="{ folder: 'train/course' }"
        action="/api/upload/folder/file"
        :show-file-list="true"
        v-model:file-list="item.fileList"
        :on-progress="uploadProgress"
        :on-remove="
          (file, uploadFiles) => {
            return handleRemove(file, uploadFiles, item, index);
          }
        "
        :on-success="
          (response, file, fileList) => {
            return uploadSuccess(response, file, fileList, item, index);
          }
        "
        :on-error="uploadError"
      >
        <el-button type="primary" size="small" class="link-left wdd-button-mini"
          >上传{{ item.dictLabel }}</el-button
        >
      </el-upload>
    </el-tab-pane>
  </el-tabs>
</template>

<!--<style scoped lang="scss"></style>-->
